<template>
  <div class="home">
    <h3>配置站点信息</h3>
    <el-form :model="formData" ref="formRef" :rules="formRules" label-width="100px" v-loading="loading">
      <el-form-item label="网站名称" prop="title">
        <el-input v-model="formData.title" placeholder="网站名称" maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item label="SEO关键词" prop="keyword">
        <el-input v-model="formData.keyword" placeholder="百度,腾讯" maxlength="120" show-word-limit />
      </el-form-item>
      <el-form-item label="SEO描述" prop="description">
        <el-input type="textarea" v-model="formData.description" placeholder="百度是...." maxlength="180" show-word-limit />
      </el-form-item>
      <el-form-item label="ICP备案号" prop="icp">
        <el-input v-model="formData.icp" placeholder="粤ICP备2000000号-1" maxlength="60" show-word-limit />
      </el-form-item>
      <el-form-item label="版权设置" prop="copyright">
        <el-input v-model="formData.copyright" placeholder="Copyright@2014-2020 " />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="hanelSave" :loading="loading">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { WebsiteActionsEnum } from '../../_/vue/store/website'
export default {
  data () {
    return {
      loading: false,
      formData: {
        title: '',
        keyword: '',
        description: '',
        icp: '',
        copyright: ''
      },
      formRules: {
        title: [{ required: true, message: '网站名称不能为空', trigger: 'blur' }]
      }
    }
  },
  async mounted () {
    this.loading = true
    const response = await this.list()
    this.formData = response.data
    this.loading = false
  },
  methods: {
    ...mapActions({
      list: WebsiteActionsEnum.LIST,
      save: WebsiteActionsEnum.SAVE
    }),
    hanelSave () {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          this.loading = true
          await this.save(this.formData)
          this.loading = false
        }
        return false
      })
    }
  }
}
</script>
